<template>
	<!-- 750rpx是固定值 -->
	<view class="content">
		<uni-fab :popMenu="false" horizontal="right" vertical="bottom" @fabClick="addLetter"></uni-fab>
		<!-- 底部弹出框 -->
		<wyb-popup ref="popup" type="bottom" height="400" width="500" 
			radius="6" :showCloseIcon="false" :duration=200>
		    <view class="popup_content">
		        <view class="popup_title">
					<view class="p_cancel" @click="popup_handle(1)">取消</view>
					<text class="p_text"> {{title_name}} </text>
					<view class="p_agree" @click="popup_handle(2)">确定</view>
				</view>
				<!-- 使用v-if来控制组件的显示 -->
				<view class="p_radio">
					<radio-group @change="radioChange1">
						<label class="p_label1" v-for="(item,index) in popup_datas1" :key="index">
							<view>{{item.name}}</view>
							<view>
								<radio :value="item.value" :checked="index == popup_current1"></radio>
							</view>
						</label>
					</radio-group>
				</view>
		    </view>
		</wyb-popup>
		<view class="top_nav">
			<view :class='current==index?nav_style[index]:nav_style[index]' 
			v-for="(item,index) in nav_group" 
			:key="item.id" 
			@click="nav_click(index)" 
			hover-class="nav_hover">
			{{item.name}}
			</view>
		</view>
		<view class="swiper_view">
			<swiper class="swiper" :current="swiper_num"
			:indicator-dots="indicatorDots" 
			:duration="duration" 
			@change="current_change">
				<swiper-item class="swiper-item_a" 
				v-for="(item,index) in swipter_items" 
				:key="index">
				    <!-- 这里要放置组件，组件本身肯定必须为scroll-view所以这里使用view -->
					<view class="a">
						<view class="combox_view">
							<view class="cb_1" @click="cb1">负责人<image class="arrow_cb" src="../../static/pngs/arrow.png"></image></view>
							<view class="cb_2" @click="cb2">职责<image class="arrow_cb" src="../../static/pngs/arrow.png"></image></view>
						</view>
						<!-- 有数据时显示数据列表，无数据显示提示 -->
						<!-- <view class="card_content"> -->
							<!-- style样式里写rpx出现高度不能正常设置的情况,写px正常  #dfe6e9-->
							<scroll-view :style="{height:scroll_view_height + 'px'}" class="a_content" scroll-y="true" refresher-enabled="true" refresher-threshold="80"
							refresher-default-style="black" refresher-background="#dfe6e9" @refresherrefresh="list_refresh" :refresher-triggered="scroll_view_refresh_trigger"
							@refresherrestore="list_restore" @refresherpulling="onPulling" @refresherabort="stopfreshed" @scrolltoupper="scroll_upper" enable-flex="true"
							 :scroll-top="scroll_t" :lower-threshold="1" @scrolltolower="loadMore">
								<!-- 当前暂无内容哦~ -->
								<!-- <view class="test_list" v-for="(item,index) in messages" :key="index">{{item}}</view> -->
								<!-- 引入自定义的列表组件,该列表组件因根据标题选项进行动态改变 -->
								<simpleMessage class="m_list" :messages="item.messages"></simpleMessage>
								<!-- 是否存在数据提示应该在simpleMessage组件中进行 -->
								<view class="listEmpty" :style="{height:scroll_view_height + 'px'}" v-if="!item.messages.length">
									<text class="no_content">当前暂无内容哦~</text>
								</view>
								<!-- 当列表项大于等于4的时候才显示下拉刷新组件 -->
								<!-- 组件配合scroll-view的loadMore方法实现加载更多,loadMore方法请求服务器获取数据，服务器分页查询下一页内容 -->
								<!-- 每个加载更多组件的状态控制由遍历对象的status属性决定,方法中修改该属性即可 -->
								<view class="load_view" v-if="item.messages.length >= 4">
									<uni-load-more class="uloadMore" :status="item.status" iconType="circle" :contentText="loadMoreContent"></uni-load-more>
								</view>
							</scroll-view>
						<!-- </view> -->
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import simpleMessage from '../../components/simple_message.vue'
	import uLoadMore from '../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue'
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			simpleMessage,
			uLoadMore,
			wybPopup
		},
		data() {
			return {
				items: ['已分配', '待验收', '已处理'],
				current: 0,
				aColor: "#ffffff",
				//轮播配置，1是否有指示点，2滑动动画时长，3默认显示的区域
				indicatorDots: false,
				duration: 190,
				swiper_num: 0,
				nav_group: [{
					id: 0,
					name: "分配"
				},
				{
					id: 1,
					name: "待验收"
				},
				{
					id: 2,
					name: "已验收"
				}],
				//导航栏动态绑定样式
				nav_style: [
					"nav_3",
					"nav_1",
					"nav_2"
				],
				swipter_items: [
					{
						id: 0,
						class: "a",
						//服务器中获取的列表数据
						messages: ["张三","多啦A梦","大雄","胖虎","游戏王"],
						status:"more"
					},
					{
						id: 1,
						class: "a",
						messages: ["李四","亚索","若手","EZ","永恩"],
						status:"more"
					},
					{
						id: 2,
						class: "a",
						messages: [],
						status:"more"
					}
				],
				messages: [
					"吴玉春",
					"王建国",
					"罗才英",
					"曾智华",
					"廖信波"
				],
				city: "",
				wheight: 0,  //窗口高度
				elementHeight:0, //元素距离顶部的高度
				scroll_view_height:0, //scroll_view的高度
				scroll_view_refresh_trigger: false,
				//是否正在刷新
				scroll_view_freshing: false,
				refresh_height: 0,
				scroll_t: 0,
				loadMoreContent: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				//上拉状态控制
				status0: "more",
				status1: "more",
				status2: "more",
				//弹出框标题变化
				title_name: "",
				//弹出框内容列表的变化0表示责任人1表示职责
				popup_radio: 0,
				//弹出框列表数据
				popup_datas1: [{
					name: "吴玉春",
					value: 0
				},{
					name: "王建国",
					value: 1
				}],
				popup_current1: null,
				popup_current2: null,
				//列表过滤属性,post请求提交后台
				popup_post: ""
			}
		},
		onLoad() {
		},
		//动态获取scroll_view的高度
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function (res) {
					that._data.wheight = res.windowHeight
					console.log("窗口的高度" + that._data.wheight)
					//获取元素的高度用来计算动态高度
					let top_nav_height = uni.createSelectorQuery().select(".a_content")  //获取这个元素
					top_nav_height.boundingClientRect(data => {
						let wheight = that._data.wheight
						that._data.scroll_view_height = wheight-data.top
						console.log("下滑列表的高度"+that._data.scroll_view_height)
					}).exec()
					// console.log(res.windowWidth)
				}
			}) 
		},
		methods: {
			//添加新的信访案件
			addLetter() {
				console.log("添加信访案件")
				uni.navigateTo({
					url:"../addLetterPage/addLetterPage",
					animationType: "slide-in-bottom",
					animationDuration: 200
				})
			},
			moveHandle(e) {
			},
			//轮播项改变事件
			current_change(e) {
				console.log(e.detail.current)
				// 根据当前序号，修改nav_style的各项
				this.current = e.detail.current
				var current = e.detail.current
				if(current == this.nav_style.length-1){
					for(var j=0;j<this.nav_style.length-1;j++){
						this.nav_style[j] = "nav_1"
					}
					this.nav_style[current] = "nav_4"
				}else{
					for(var j=0;j<this.nav_style.length-1;j++){
						if(j == current){
							this.nav_style[current] = "nav_3"
						}else{
							this.nav_style[j] = "nav_1"
						}
					}
					this.nav_style[this.nav_style.length-1] = "nav_2"
				}
				console.log(this.nav_style)
			},
			//导航栏点击事件
			nav_click(i){
				this.current = i
				this.swiper_num = i
				if(i == this.nav_style.length-1){
					for(var j=0;j<this.nav_style.length-1;j++){
						this.nav_style[j] = "nav_1"
					}
					this.nav_style[i] = "nav_4"
				}else{
					for(var j=0;j<this.nav_style.length-1;j++){
						if(j == i){
							this.nav_style[i] = "nav_3"
						}else{
							this.nav_style[j] = "nav_1"
						}
					}
					this.nav_style[this.nav_style.length-1] = "nav_2"
				}
				console.log(this.nav_style)
			},
			//自定义下拉刷新触发事件，重新获取列表。
			list_refresh(){
				if(this.scroll_view_freshing) return
				this.scroll_view_freshing = true
				if(!this.scroll_view_refresh_trigger)
				this.scroll_view_refresh_trigger = true
			// 	//这里可以进行请求的发送操作
				console.log("下拉刷新被触发")
				setTimeout(()=>{
					this.scroll_view_refresh_trigger = false
					this.scroll_view_freshing = false
				},1000)
				// this.scroll_view_refresh_trigger = false
				this.scroll_view_freshing = false
			},
			//恢复正常时触发，下拉控件下拉刷新都置为false等待下一次的触发
			list_restore(){
					this.scroll_view_refresh_trigger = false
					this.scroll_view_freshing = false
			},
			//自定义下拉刷新控件被下拉,只要下拉了组件就会触发
			//限制下拉位置应该在这个方法里进行设置
			onPulling(e){
				//下拉但是没触发下拉情况时下拉过程逐渐缓慢
				//先实现如何下拉的指定位置后不能在进行下拉操作
				// console.log("下拉距离"+e.target.deltaY)
				//下拉事件对象的deltaY超过87已经到达设置的阈值此事不能继续进行下拉操作
				if(e.target.deltaY > 87) {
					// console.log("停止下拉操作")
				}
			},
			// //自定义下拉被终止
			stopfreshed(){
				
			},
			// //触发滑动到顶部事件
			scroll_upper(){
				
			},
			//该函数只是用来监听滑块的,对于下拉而言滑块并没有滑动
			// scroll(e){
			// 	// console.log(e.detail)
			// },
			doNothing() {
				
			},
			// 加载更多 
			loadMore() {
				//在此之前应该确认当前轮播项具体是哪一个
				console.log("加载更多：当前轮播项" + this.current)
				console.log("滑动到最底部触发下拉刷新")
				if(this.current === 0){
					this.swipter_items[0].status = "loading"
					setTimeout(()=>{
						this.swipter_items[0].status = "noMore"
						//如果没有更多数据则显示没有跟多数据status为noMore
					},1000)
				}else if(this.current === 1){
					this.swipter_items[1].status = "loading"
					setTimeout(()=>{
						this.swipter_items[1].status = "noMore"
						//如果没有更多数据则显示没有跟多数据status为noMore
					},1000)
				}else{
					this.swipter_items[2].status = "loading"
					setTimeout(()=>{
						this.swipter_items[2].status = "noMore"
						//如果没有更多数据则显示没有跟多数据status为noMore
					},1000)
				}
				
			},
			cb1() {
				this.title_name = "请选择负责人"
				this.popup_datas1 = [{
					name: "吴玉春",
					value: 0
				},
				{
					name: "王建国",
					value: 1
				}]
				this.$refs.popup.show() // 显示
			},
			cb2() {
				this.title_name = "请选择职责"
				this.popup_datas1 = [{
					name: "油烟噪音",
					value: 0
				},
				{
					name: "违章建筑",
					value: 1
				}]
				this.$refs.popup.show() // 显示
			},
			popup_handle(num){
				if(num == 1) {
					console.log("点击了取消")
					this.$refs.popup.hide()
				} else {
					console.log("点击了确定")
					this.$refs.popup.hide()
					//点击确定后进行提交操作
				}
			},
			radioChange1(evt){
				for (let i = 0;i < this.popup_datas1.length;i++) {
					if (this.popup_datas1[i].value == evt.detail.value) {
						this.popup_current1 = i
						if(this.popup_current1 == 0){
							console.log("选择了" + this.popup_datas1[i].name)
						}else if(this.popup_current1 == 1){
							console.log("选择了" + this.popup_datas1[i].name)
						}else{
							console.log("无")
						}
						break
					}
				}
			}
	   }
	}
</script>

<style lang="scss">
	page {
		background-color: #55aaff;
		height: 100%;
	}
	
	.content {
		position: fixed;
		height: 100%;
		background-color: #55aaff;
		/* display: flex; */
		/* flex-direction: column; */
	}
	
	.top_nav {
		/* position: fixed; */
		margin-top: 65rpx;
		// background-color: #007AFF;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.nav_1 {
			flex-grow: 1;
			height: 50rpx;
			line-height: 50rpx;
			// background-color: #4CD964;
			border-right: 1px solid #C4C4C4;
			text-align: center;
			color: #95a5a6;
		}
		.nav_2 {
			flex-grow: 1;
			height: 50rpx;
			line-height: 50rpx;
			// background-color: #4CD964;
			text-align: center;
			color: #95a5a6;
			// border-right: 3px solid #000000;
		}
		.nav_3 {
			flex-grow: 1;
			height: 50rpx;
			line-height: 50rpx;
			// background-color: rgba(255,0,0,0.5);
			border-right: 1px solid #C4C4C4;
			text-align: center;
			color: #ecf0f1;
		}
		.nav_4 {
			flex-grow: 1;
			height: 50rpx;
			line-height: 50rpx;
			// background-color: rgba(255,0,0,0.5);
			text-align: center;
			color: #ecf0f1;
			// border-right: 3px solid #000000;
		}
		.nav_hover {
			background-color: rgba(117, 117, 117, 0.5);
		}
	}
	
	.swiper_view {
		width: 750rpx;
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 30px 30px 0 0;	
	}
	
	.swiper {
		/* 这里设置了100%之后会动态改变swiper的大小 */
		width: 750rpx;
		height: 100%;
	}
	
	.swiper-item_a {
		height: 100%;
	} 
	.a {
		background-color: c;
		height: 100%;
		border-radius: 30px 30px 0 0;
		// position: fixed;
		display: flex;
		flex-direction: column;
		.combox_view {
			width: 750rpx;
			height: 150rpx;
			background-color: #FFFFFF;
			border-radius: 30px 30px 0 0;
			// position: fixed;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border-bottom: 0.5px solid #C4C4C4;
			// position: fixed;
			.cb_1 {
				width: 355rpx;
				height: 50rpx;
				background-color: #00ff00;
				line-height: 50rpx;
				border-right: 1px solid #C4C4C4;
				// align-content: center;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.arrow_cb {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
			.cb_2 {
				width: 355rpx;
				height: 50rpx;
				background-color: #00ff00;
				line-height: 50rpx;
				// border-right: 1px solid #C4C4C4;
				// align-content: center;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.arrow_cb {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		 }
		 
		.a_content {
			background-color: #dfe6e9;
		}
		// 	width: 750rpx;
		// 	// border-radius: 30px 30px 0 0;
		// 	// height: 100%;
		// 	// height: 1000rpx;
		// 	background-color: #dfe6e9;
		// 	text-align: center;
		// 	color: #8a8a8a;
		// 	padding: 10rpx;
		// 	.test_list {
		// 		margin-top: 15rpx;
		// 		width: 730rpx;
		// 		height: 350rpx;
		// 		background-color: #EE9900;
		// 	}
		// }
		.listEmpty {
			background-color: #dfe6e9;
			width: 100%;
			position: fixed;
			.no_content{
				// background-color: #FFFFFF;
				width: 390rpx;
				display: block;
				font-size: 50rpx;
				// 设置为上下居中水平居中
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.load_view {
			// margin-bottom: 200rpx;#dfe6e9
			.uloadMore {
				background-color: #55ffff;
				height: 200rpx;
			}
		}
	}
	
	.popup_content {
		 width: 100%;
		 height: 500rpx;
		 background-color: #FFFFFF;
		 text-align: center;
		 .popup_title {
			 display: flex;
			 justify-content: space-around;
			 background-color: #0077AA;
			 .p_cancel {
				 color: #55aaff;
				 font-size: 40rpx;
			 }
			 .p_agree {
				 color: #55aaff;
				 font-size: 40rpx;
			 }
			 .p_text {
				 font-size: 40rpx;
			 }
		 }
		 .p_radio {
			 .p_label1 {
				 display: flex;
				 justify-content: space-around;
				 font-size: 40rpx;
				 border-bottom: 1px solid #C4C4C4;
				 align-items: center;
			 }
		 }
	}
	
</style>
